<template>
  <Card dis-hover :bordered="false">
    <Row class="ivu-mb-16">
      <Col span="22">
        <Input
          placeholder="请输入项目名称"
          v-model="params.project_name"
          @on-clear="searchData"
          @on-enter="searchData"
          clearable
          v-width="150"
        />
        <Select
          placeholder="请选择状态"
          class="ivu-ml-16"
          v-model="params.status"
          clearable
          @on-change="searchData"
          v-width="120"
        >
          <Option
            v-for="item in statelist"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col span="2" style="text-align: right">
        <Button
          type="primary"
          @click="handleAdd"
          v-hasC="{
            name: 'v1-project-create',
            flag: 'v1/project/create',
          }"
          >新增</Button
        >
      </Col>
    </Row>

    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      :max-height="tableHeigth"
    >
      <template #admin_names="{ row }">
        <Tag v-for="item in row.admin_names" :key="item">{{ item }}</Tag>
      </template>
      <template #status_str="{ row }">
        <Badge
          status="success"
          :text="row.status_str"
          v-if="row.status_str === '启用'"
        />
        <Badge status="error" :text="row.status_str" v-else />
      </template>

      <template #action="{ row }">
        <a
          class="ivu-mr-8"
          @click="handleSetManager(row.id)"
          v-hasC="{
            name: 'v1-project-edit-admin',
            flag: 'v1/project/edit-admin',
          }"
          >设置管理员</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-project-edit-admin',
            flag: 'v1/project/edit-admin',
          }"
        />
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-project-update',
            flag: 'v1/project/update',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-project-update',
            flag: 'v1/project/update',
          }"
        />
        <a
          @click="handleDel(row.id)"
          class="del"
          v-hasC="{
            name: 'v1-project-delete',
            flag: 'v1/project/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
    <Modal
      :mask-closable="false"
      v-model="addModal"
      :title="edit ? '新增' : '编辑'"
      :footer-hide="true"
      :draggable="true"
    >
      <Form ref="create" :model="projectInfo" :rules="rules" :label-width="60">
        <FormItem label="名称" prop="project_name" required>
          <Input
            v-model="projectInfo.project_name"
            placeholder="请输入名称"
            :maxlength="30"
          />
        </FormItem>

        <FormItem label="排序" prop="sort">
          <InputNumber v-model="projectInfo.sort" placeholder="排序" :min="0" />
        </FormItem>
        <FormItem label="状态" prop="status">
          <Switch v-model="projectInfo.status" />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button type="default" @click="addModal = false">取消</Button>
        <Button
          type="primary"
          @click="ok"
          style="margin-left: 10px"
          :loading="btnLoading"
          >确定</Button
        >
      </div>
    </Modal>

    <Modal
      :mask-closable="false"
      v-model="managerModel"
      title="设置管理员"
      :footer-hide="true"
      :draggable="true"
    >
      <Form ref="manager" :model="managerInfo" :label-width="90">
        <FormItem label="项目管理员" prop="member_ids">
          <Select
            placeholder="请选项目管理员"
            v-model="managerInfo.member_ids"
            multiple
            :filterable="userList.length >= 10"
          >
            <Option
              v-for="item in userList"
              :value="item.value + ''"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button type="default" @click="managerModel = false">取消</Button>
        <Button
          type="primary"
          @click="editManager"
          style="margin-left: 10px"
          :loading="btnLoading"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  projectList,
  createProject,
  deleteProject,
  projectInfo,
  updateProject,
  adminInfo,
  editAdmin,
} from "@api/project.js";
export default {
  name: "project",
  data() {
    return {
      tableHeigth: document.body.clientHeight - 280,
      addModal: false,
      managerModel: false,
      edit: true,
      loading: false,
      btnLoading: false,
      statelist: [],
      userList: [],
      params: {
        project_name: "",
        current: 1,
        size: 10,
        status: "",
        order_column: "",
        order_sort: "",
      },
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          key: "id",
          title: "ID",
          width: 80,
        },
        {
          key: "project_name",
          title: "项目名称",
          minWidth: 100,
        },
        {
          slot: "admin_names",
          title: "管理员",
          minWidth: 160,
        },
        {
          key: "sort",
          title: "排序",
          minWidth: 80,
        },
        {
          key: "doctor_num",
          title: "医生数量",
          sortable: "custom",
          minWidth: 110,
        },
        {
          key: "account_num",
          title: "账号数",
          sortable: "custom",
          minWidth: 100,
        },
        {
          key: "devices_num",
          title: "设备数",
          sortable: "custom",
          minWidth: 100,
        },
        {
          key: "member_num",
          title: "人员数",
          sortable: "custom",
          minWidth: 100,
        },
        {
          slot: "status_str",
          title: "状态",
          width: 80,
        },
        {
          slot: "action",
          title: "操作",
          width: 210,
          fixed: "right",
        },
      ],
      list: [],
      projectInfo: {
        id: "",
        project_name: "",
        sort: 100,
        status: true,
      },
      rules: {
        project_name: [{ required: true, message: "请输入项目名称" }],
      },
      managerInfo: {
        id: "",
        member_ids: [],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    searchData() {
      this.params.current = 1;
      this.getData();
    },
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    handleSetManager(id) {
      this.managerModel = true;
      adminInfo({ id: id }).then((res) => {
        this.userList = res.condition.member;
        this.managerInfo.member_ids = res.member_ids;
        this.managerInfo.id = id;
      });
    },
    editManager() {
      this.btnLoading = true;
      editAdmin(this.managerInfo).then(() => {
        this.$Message.success("设置成功");
        this.btnLoading = false;
        this.managerModel = false;
        this.getData();
      });
    },
    handleDel(index) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          deleteProject({ id: index })
            .then(() => {
              this.$Message.success("删除成功");
              this.getData();
            })
            .catch(() => {});
        },
      });
    },
    handleAdd() {
      this.projectInfo = {
        id: "",
        project_name: "",
        sort: 100,
        status: true,
      };
      this.addModal = true;
      this.edit = true;
      this.$refs.create.resetFields();
    },
    handleEdit(info) {
      this.addModal = true;
      this.edit = false;
      projectInfo({ id: info.id })
        .then((res) => {
          this.projectInfo = {
            id: res.id,
            project_name: res.project_name,
            sort: res.sort,
            status: res.status == 1 ? true : false,
          };
        })
        .catch(() => {});
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    getData() {
      this.loading = true;
      const params = {
        pageSize: this.params.size,
        page: this.params.current,
        status: this.params.status,
        project_name: this.params.project_name,
        order_column: this.params.order_column,
        order_sort: this.params.order_sort,
      };
      projectList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.statelist = res.condition.status;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    addProject() {
      this.btnLoading = true;
      const params = {
        project_name: this.projectInfo.project_name,
        sort: this.projectInfo.sort,
        status: this.projectInfo.status ? 1 : 0,
      };
      if (this.edit) {
        createProject(params)
          .then((res) => {
            this.$Message.success("添加成功");
            this.addModal = false;
            this.btnLoading = false;
            this.params.current = 1;
            this.getData();
          })
          .catch(() => {
            this.btnLoading = false;
          });
      } else {
        updateProject(Object.assign({}, params, { id: this.projectInfo.id }))
          .then((res) => {
            this.$Message.success("编辑成功");
            this.addModal = false;
            this.btnLoading = false;
            this.getData();
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
    ok() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          this.addProject();
        } else {
          this.addModal = true;
          // this.$Message.error('填写错误，保存失败！')
          return;
        }
      });
    },
  },
};
</script>
